<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
    <style>
        .loading{
            width: 70px;
            height: 70px;
            position: absolute;
            left: 50%;
            top: 200px;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div id="chart1" style="width: 600px;height: 400px;margin-left: 100px;display: inline-block;"></div>
<div id="chart2" style="width: 600px;height: 400px;margin-left: 100px;display: inline-block;"></div>
<div id="contentDiv" >
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        <div>
            <div class="widget-body no-padding">
                <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                    <tr>
                    </tr>
                    <tr>
                        <th>id</th>
                        <th>设备地点</th>
                        <th>设备名称</th>
                        <th>温度</th>
                        <th>湿度</th>
                        <th>设备状态</th>
                    </tr>
                    </thead>
                    <tbody style="position: relative;">
                    <img id="loadingImg" src="../../img/loading/loading.png"
                         class="layui-anim layui-anim-rotate layui-anim-loop loading"
                    >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script src="../../js/dashboard/echarts.min.js"></script>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
	var layer = layui.layer;
});
var userStatus = showDictSelect("status", "userStatus", true);

var pers = checkPermission();

$('#loadingImg').hide()

var example;
function init(){
	example =
    	$('#dt-table').DataTable({
        	"searching": false,
        	"processing": false,
        	"serverSide" : true,
        	"language": {
                "url": "/js/plugin/datatables/Chinese.lang"
            },
        	"ajax": {
        		"url" : "/device/iotList",
        		"type":"get",
        		"data":function(d){
    				d.sn = $('#deviceSN').val();
    				d.name = $('#deviceName').val();
    				d.treeData = $('#treeData').val();
    				d.pageType = "Temperature";//温湿度传感器
        		},
    			"error":function(xhr, textStatus, errorThrown){
    				var msg = xhr.responseText;
    				console.log(msg)
    			}
        	},
        	"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
            "columns": [
                { "data": "iot_id", "defaultContent": ""},
                { "data": "root_group_name", "defaultContent": ""},
                { "data": "name", "defaultContent": ""},
                { "data": "data.TEMPERATURE_1", "defaultContent": ""},
                { "data": "data.MOISTURE_1", "defaultContent": ""},
                { "data": "states", "defaultContent": ""},
            ],
            "order": [[ 1, "desc" ]]
        } );
}

$("#searchBt").click(function(){
	example.ajax.reload();
});

$("#addBt").click(function(){
    $.ajax({
        url: '/device/getStatus',
        type: 'GET',
        dataType: 'json',
        beforeSend:function(){
            showLoading()
        },
        success: function(res){
            hideLoading()
         },
        error: function(res){
            hideLoading()
        }
    });
});

        function showLoading(){
            $('#loadingImg').show(500)
        }
        function hideLoading(){
            $('#loadingImg').hide()
        }

init();

let chart1 = echarts.init(document.getElementById('chart1'));
let chart2 = echarts.init(document.getElementById('chart2'));
let option1 = {
    title: {
        text: '空间温度变化'
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['空间1','空间2','空间3','空间4','空间5'],
        left: '30%',
        top: 10
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'time',
            boundaryGap: false,
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '温度/℃'
        }
    ],
    series: [
        {
            name: '空间1',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',23],
                ['2012-03-01 08:30',24],
                ['2012-03-01 09:00',28],
                ['2012-03-01 09:30',23],
                ['2012-03-01 10:00',25],
            ]
        },
        {
            name: '空间2',
            type: 'line',
            stack:'总量',
            data:[
                ['2012-03-01 08:00',28],
                ['2012-03-01 08:30',28],
                ['2012-03-01 09:00',29],
                ['2012-03-01 09:30',30],
                ['2012-03-01 10:00',32],
            ]
        },
        {
            name: '空间3',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',28],
                ['2012-03-01 08:30',27],
                ['2012-03-01 09:00',30],
                ['2012-03-01 09:30',34],
                ['2012-03-01 10:00',33],
            ]
        },
        {
            name: '空间4',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',23],
                ['2012-03-01 08:30',25],
                ['2012-03-01 09:00',28],
                ['2012-03-01 09:30',26],
                ['2012-03-01 10:00',23],
            ]
        },
        {
            name: '空间5',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',18],
                ['2012-03-01 08:30',20],
                ['2012-03-01 09:00',22],
                ['2012-03-01 09:30',28],
                ['2012-03-01 10:00',23],
            ]
        }
    ]
};

let option2 = {
    title: {
        text: '空间湿度变化'
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['空间1','空间2','空间3','空间4','空间5'],
        left: '30%',
        top: 10
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'time',
            boundaryGap: false,
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '湿度/%'
        }
    ],
    series: [
        {
            name: '空间1',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',60],
                ['2012-03-01 08:30',61],
                ['2012-03-01 09:00',62],
                ['2012-03-01 09:30',65],
                ['2012-03-01 10:00',68],
            ]
        },
        {
            name: '空间2',
            type: 'line',
            stack:'总量',
            data:[
                ['2012-03-01 08:00',29],
                ['2012-03-01 08:30',32],
                ['2012-03-01 09:00',33],
                ['2012-03-01 09:30',28],
                ['2012-03-01 10:00',39],
            ]
        },
        {
            name: '空间3',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',45],
                ['2012-03-01 08:30',43],
                ['2012-03-01 09:00',38],
                ['2012-03-01 09:30',50],
                ['2012-03-01 10:00',58],
            ]
        },
        {
            name: '空间4',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',28],
                ['2012-03-01 08:30',45],
                ['2012-03-01 09:00',36],
                ['2012-03-01 09:30',57],
                ['2012-03-01 10:00',88],
            ]
        },
        {
            name: '空间5',
            type: 'line',
            stack:'总量',
            data: [
                ['2012-03-01 08:00',67],
                ['2012-03-01 08:30',59],
                ['2012-03-01 09:00',30],
                ['2012-03-01 09:30',40],
                ['2012-03-01 10:00',50],
            ]
        }
    ]
};
chart1.setOption(option1);
chart2.setOption(option2);

</script>

</body>
</html>

